<!--tx动漫列表详情-->
<template>
	<el-row>
		<el-col :span="24">
			<el-space wrap>
				<el-card v-for="item in itemList" class="item" shadow="hover"  @click="to(item.id)">
					<el-row :gutter="20">
						<el-col :span="12">
							<el-image style="height: 177px" :src="item.img"  >

							</el-image>
						</el-col>
						<el-col :span="12">
							<div class="title font-600 "  >{{ item.title }}</div>
							<div class="tag">{{item.authorName }}</div>
							<div class="tag">
								<el-tag round v-for="tag in item.cateName.split(',')">{{ tag }}</el-tag>
							</div >
							<div class="tag">	人气：{{ item.view/100000000 }}亿</div>
							<div class="tag introduction">
								{{item.introduction}}
							</div>
						</el-col>
					</el-row>
				</el-card>
			</el-space>
		</el-col>
	</el-row>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps(<any>{
	itemList: Array, // 接收传递的 hotList 属性，类型为数组
});


/**
 * 详情页跳转
 * @param id
 */
function to(id: any) {
	router.push(`/itemInfo/${id}`)
}
</script>
<style scoped>
:deep(.el-card__body){
	padding-top: 11.5px;
	padding-left: 5px;
	padding-right: 0px;
}

.item{
	cursor: pointer;
	width: 290px;
	height: 200px;

	border-radius: 5px;
	transition: transform 0.3s ease; /* 增加平滑过渡效果 */
	.title{
		color: rgb(51, 51, 51);
		font-size: 16px;
		padding-bottom: 5px;
	}
	.tag{
		font-size: 12px;
		padding-bottom: 5px;
	}
	.introduction{
		width: 100%;
		color: #999;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3; /* 限制显示三行 */
		-webkit-box-orient: vertical;
		line-height: 1.5em; /* 每行高度 */
		max-height: 4.5em; /* 控制三行的总高度 (3 * 1.5em) */
	}
}
</style>
